<template>
    <div
        class="min-w-page relative bg-page box-border flex w-full h-screen"
        v-loading="loading"
        element-loading-text="加载中..."
    >
        <!-- 左侧菜单 -->
        <Menu :menu="menuList"/>
        <!-- 右侧顶部 -->
        <Header @openOperation="dialogVisible = true"/>
        <!-- 右侧盒子 -->
        <div class="right-container relative w-full box-border overflow-y-scroll">
            <template v-if="isNetworkTimeout">
                <Empty empty-type="networkTimeout"/>
            </template>
            <template v-else>
                <router-view/>
            </template>
        </div>
        <!-- 系统操作弹窗 -->
        <SystemOperation v-model="dialogVisible" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { httpGetMenuList } from '@api/module/system'
import { GlobalMitt, Storage, timeout } from '@utils/methods'
import { initial } from 'lodash'
import Empty from '@components/Empty/index.vue'
import Menu from './components/Menu/index.vue'
import Header from './components/Header/index.vue'
import SystemOperation from './components/SystemOperation/index.vue'

// 网络是否超时
const isNetworkTimeout = ref(false)

// 监听网络拦截是否超时
GlobalMitt.on('networkTimeout', data => {
    isNetworkTimeout.value = data
})

// 显示隐藏
const dialogVisible = ref(false)

// 加载状态
const loading = ref(true)
// 菜单列表
const menuList = ref([])
/**
 * 获取菜单
 * */
const getMenu = () => {
    const storageMenu = Storage.get('menuList')
    if (storageMenu) {
        menuList.value = initial(storageMenu)
        loading.value = false
    } else {
        httpGetMenuList().then(({ data }) => {
            Storage.set('menuList', data)
            menuList.value = initial(data)
        }).finally(async () => {
            await timeout(500)
            loading.value = false
        })
    }
}

getMenu()
</script>

<style lang="less">
    .right-container{
        margin: 70px 0 0 250px;
        height: calc(100% - 70px);
    }
</style>
